<template>
	<div class="home">
		<!-- 首页轮播 -->
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(item,i) in carouselItems" :key="i" @click="onDetail(item.product_id)">
				<van-image :src="APIDomainName + item.img" />
			</van-swipe-item>
		</van-swipe>
		
		<!-- 首页功能快捷入口 Grid宫格-->
		<van-grid>
			<van-grid-item v-for="(item,i) in homeItems" :key="i" :icon="item.img" :text="item.title"
				:to="{name:item.routeName}" />
		</van-grid>

		<!-- 商品推荐 -->
		<div class="goods-block">
			<van-cell title="商品推荐" icon="gift-o"></van-cell>
			<van-row type="flex" justify="center">
				<van-col span="7" class="goods-item" v-for="(item,i) in recommendedItems" :key="i"
					@click="onDetail(item.product_id)">
					<!-- 图片 -->
					<van-image :src="APIDomainName + item.pic"></van-image>
					<!-- 商品名 -->
					<div class="van-ellipsis">{{item.title}}</div>
					<!-- 单价 -->
					<div class="price">￥{{item.price.toFixed(2)}}</div>
				</van-col>
			</van-row>
		</div>
		
		<!-- 新品上架 -->
		<div class="goods-block">
			<van-cell title="新品上架" icon="gift-o"></van-cell>
			<van-row type="flex" justify="center">
				<van-col span="7" class="goods-item" v-for="(item,i) in newArrialItems" :key="i"
					@click="onDetail(item.product_id)">
					<!-- 图片 -->
					<van-image :src="APIDomainName + item.pic"></van-image>
					<!-- 商品名 -->
					<div class="van-ellipsis">{{item.title}}</div>
					<!-- 单价 -->
					<div class="price">￥{{item.price.toFixed(2)}}</div>
				</van-col>
			</van-row>
		</div>
		
		<!-- 单品销售 -->
		<div class="goods-block">
			<van-cell title="单品销售" icon="gift-o"></van-cell>
			<van-row type="flex" justify="center">
				<van-col span="7" class="goods-item" v-for="(item,i) in recommendedItems" :key="i"
					@click="onDetail(item.product_id)">
					<!-- 图片 -->
					<van-image :src="APIDomainName + item.pic"></van-image>
					<!-- 商品名 -->
					<div class="van-ellipsis">{{item.title}}</div>
					<!-- 单价 -->
					<div class="price">￥{{item.price.toFixed(2)}}</div>
				</van-col>
			</van-row>
		</div>
		
	</div>
</template>

<script>
	//导入封装后的首页接口
	import * as HomeAPI from "@/api/home.js"
	
	import HomeSwipe from "./components/HomeSwipe.vue"
	import HomeEnter from "./components/HomeEnter.vue"	
	import HomeProduct from "./components/HomeProduct.vue"
	
	export default {
		name: 'home',
		components: {
			HomeSwipe,HomeEnter,HomeProduct
		},

		data() {
			return {
				carouselItems: [], //轮播图
				recommendedItems: [], //商品推荐		
				newArrialItems: [], //新品上架		
				topSaleItems: [], //销售排行		
				
				//首页快捷功能入口
				homeItems: [{
						title: "新闻资讯",
						routeName: "working",
						img: require("@/assets/images/menu1.png"),
					},
					{
						title: "图片分享",
						routeName: "working",
						img: require("@/assets/images/menu2.png"),
					},
					{
						title: "商品购买",
						routeName: "product",
						img: require("@/assets/images/menu3.png"),
					},
					{
						title: "留言反馈",
						routeName: "working",
						img: require("@/assets/images/menu4.png"),
					},
					{
						title: "视频专区",
						routeName: "working",
						img: require("@/assets/images/menu5.png"),
					},
					{
						title: "联系我们",
						routeName: "working",
						img: require("@/assets/images/menu6.png"),
					},
				],
			}
		},

		// 生命周期钩子-实例创建后,可以用this.*
		created() {
			//2.使用封装后的接口
			HomeAPI.getHomeDataAPI().then(result => {
				console.log(result); //控制台调式输出
				this.carouselItems = result.data.carouselItems; //保存API调用的返回的轮播数据			
				this.recommendedItems = result.data.recommendedItems; //保存首页商品推荐数据
				this.newArrialItems = result.data.newArrialItems; //保存首页新品上架	数据
				this.topSaleItems = result.data.topSaleItems; //保存首页销售排行数据				
			});
		},				
		
		methods: {
			//点击商品后导航到商品明细，参数为商品id
			onDetail(id) {
				this.$router.push(`/product/detail/${id}`);
			}
		}
	}
</script>
<style scoped>
	.goods-block {
		background-color: #f0f1f4;
	}
	.van-cell {
		font-size: 16px;
		background-color: #e0e2e5;
	}

	.goods-item {
		display: flex;
		flex-direction: column;
		background-color: #fafcff;
		margin: 5px;
		padding: 5px;
		border-radius: 10px;
		font-size: 14px;
	}

	.price {
		font-size: 18px;
		font-weight: bold;
		color: red;
		text-align: right;
	}
</style>

